import React, { useEffect, useState } from 'react';
import { Table, Modal, Select, DatePicker, Input } from 'antd';
import * as service from '../../../api/jiang/index'
import { QuestionCircleOutlined } from '@ant-design/icons';
interface Props { }


function HealthRecord(props: Props) {
    const [loading, setLoading] = useState(false);
    const [list, setList] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [lister, setLister] = useState([])
    
    useEffect(() => {
        setLoading(true);
        service.wglist().then((res) => {
            console.log(res);
            setList(res.data)
            setLoading(false);
        })

        service.healthlist().then((res) => {
            console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setLister(arr)
        })
    }, [])
    const { confirm } = Modal;
    

    const deletes = () => {
        confirm({
            title: '删除确认',
            icon: <QuestionCircleOutlined />,
            content: '删除后无法恢复，确定要删除此条记录吗？',
            okText: '确定',
            // okType: 'danger',
            cancelText: '取消',
            onOk() {
              console.log('OK');
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }


    const showModal = () => {
        setIsModalOpen(true);
    }
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };


   
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    const onChange = (date: any, dateString: any) => {
        console.log(date, dateString);
    };


    const columns = [
        {
            title: '测量时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '数值（kg）',
            dataIndex: 'kg',
            key: 'kg',
        },
        {
            title: '评估',
            dataIndex: 'pg',
            key: 'pg',
        },
        {
            title: '数据来源',
            // dataIndex: 'source',
            key: 'ssources',
            render: (_: any, row: any) => (
                <>
                    <span>用户记录</span>
                </>
            ),
        },
        {
            title: '操作',
            key: 'ss',
            render: (_: any, row: any) => (
                <>
                    <span  onClick={() => { showModal() }} style={{ color: 'blue' }}>编辑</span>&nbsp;&nbsp;
                    <span onClick={() => { deletes() }} style={{ color: 'red' }}>删除</span>
                </>
            ),
        },
    ]

    return (
        <div style={{ padding: 10 }}>
            {/* 健康记录 */}

            <Table columns={columns} dataSource={list} loading={loading} />
            {/* 编辑弹框 */}
            <Modal title="编辑健康记录" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'确认'}>
                <div style={{ marginBottom: 10 }}>
                    <span >数据类型</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 200 }}
                        onChange={handleChange}
                        options={lister}
                    />
                </div>
                <div style={{ marginBottom: 10 }}>
                    <span >测量时间</span>&nbsp;&nbsp;
                    <DatePicker onChange={onChange} style={{ width: 200 }} />
                </div>
                <div style={{ display: 'flex' }}>
                    <span style={{ width: 40 }}>数值</span>
                    <Input placeholder="请输入" style={{ width: 220 }} />
                </div>
            </Modal>

        </div>
    );
}

export default HealthRecord;